<template>
  <div class="aircon-container">
    <div class="itemCont" v-for="(item, index) in airconList" :key="index">
      <div class="common-title">
        <p class="line"></p>
        <p class="text">{{ item.title }}</p>
      </div>
      <div class="cont">
        <div class="status-row">
          <span class="status-label">工作状态：</span>
          <span class="status-value">{{ item.workStatus }}</span>
        </div>

        <div class="info-container">
          <div class="info-left">
            <div class="info-row">
              <div class="info-item">
                <div class="label">制冷开启点：</div>
                <div class="value">{{ item.coolingStartPoint }}</div>
              </div>
              <div class="info-item">
                <div class="label">高温告警点：</div>
                <div class="value">{{ item.highTempAlarmPoint }}</div>
              </div>
            </div>

            <div class="info-row">
              <div class="info-item">
                <div class="label">制冷停止点：</div>
                <div class="value">{{ item.coolingStopPoint }}</div>
              </div>
              <div class="info-item">
                <div class="label">低温告警点：</div>
                <div class="value">{{ item.lowTempAlarmPoint }}</div>
              </div>
            </div>

            <div class="info-row">
              <div class="info-item">
                <div class="label">制热开启点：</div>
                <div class="value">{{ item.heatingStartPoint }}</div>
              </div>
              <div class="info-item">
                <div class="label">湿度：</div>
                <div class="value">{{ item.humidity }}</div>
              </div>
            </div>

            <div class="info-row">
              <div class="info-item">
                <div class="label">制热停止点：</div>
                <div class="value">{{ item.heatingStopPoint }}</div>
              </div>
            </div>
          </div>

          <div class="alarm-buttons">
            <el-button type="primary" class="alarm-btn">温度告警</el-button>
            <el-button type="primary" class="alarm-btn">低压机告警</el-button>
            <el-button type="primary" class="alarm-btn">高低压压告警</el-button>
            <el-button type="primary" class="alarm-btn">高低气压告警</el-button>
            <el-button type="primary" class="alarm-btn">传感器告警</el-button>
          </div>

          <div class="temperature-gauge">
            <img src="@/assets/images/monitor/thermometer_pic.png" alt="空调温度计" />
            <!-- <div class="current-temp">{{ item.currentTemp }}</div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

// 空调数据列表
const airconList = ref([
  {
    title: '1#空调',
    workStatus: '运行',
    coolingStartPoint: '22 °C',
    coolingStopPoint: '20 °C',
    heatingStartPoint: '13 °C',
    heatingStopPoint: '15 °C',
    highTempAlarmPoint: '- °C',
    lowTempAlarmPoint: '- °C',
    humidity: '37.8 %',
    currentTemp: '31.6 °C'
  },
  {
    title: '2#空调',
    workStatus: '待机',
    coolingStartPoint: '23 °C',
    coolingStopPoint: '21 °C',
    heatingStartPoint: '14 °C',
    heatingStopPoint: '16 °C',
    highTempAlarmPoint: '35 °C',
    lowTempAlarmPoint: '5 °C',
    humidity: '35.2 %',
    currentTemp: '28.3 °C'
  },
  {
    title: '3#空调',
    workStatus: '故障',
    coolingStartPoint: '24 °C',
    coolingStopPoint: '22 °C',
    heatingStartPoint: '12 °C',
    heatingStopPoint: '14 °C',
    highTempAlarmPoint: '36 °C',
    lowTempAlarmPoint: '4 °C',
    humidity: '42.1 %',
    currentTemp: '36.8 °C'
  },
  {
    title: '4#空调',
    workStatus: '运行',
    coolingStartPoint: '22 °C',
    coolingStopPoint: '20 °C',
    heatingStartPoint: '13 °C',
    heatingStopPoint: '15 °C',
    highTempAlarmPoint: '37 °C',
    lowTempAlarmPoint: '5 °C',
    humidity: '39.5 %',
    currentTemp: '30.2 °C'
  },
  {
    title: '5#空调',
    workStatus: '待机',
    coolingStartPoint: '21 °C',
    coolingStopPoint: '19 °C',
    heatingStartPoint: '12 °C',
    heatingStopPoint: '14 °C',
    highTempAlarmPoint: '34 °C',
    lowTempAlarmPoint: '3 °C',
    humidity: '36.4 %',
    currentTemp: '25.7 °C'
  }
]);
</script>

<style lang="scss" scoped>
.aircon-container {
  padding: 0.12rem 0.24rem;
  background: #fff;
  
  .itemCont {
    padding: 0.08rem 0 0.24rem;
  }

  .cont {
    border: 1px solid #E5E6EA;
    border-radius: 0.04rem;
    margin: 0.08rem 0;
    padding-bottom: 0.2rem;

    .status-row {
      background-color: #f0f5ff;
      padding: 0.1rem 0.4rem;

      .status-label {
        font-weight: 500;
      }
    }

    .info-container {
      display: flex;
      align-items: center;
      padding: 0.12rem 0;

      .info-left {
        width: 7.8rem;
        margin-right: 0.4rem;

        .info-row {
          display: flex;
          height: 0.36rem;
          line-height: 0.36rem;

          .info-item {
            flex: 1;
            display: flex;
            padding-left: 0.4rem;

            .label {
              color: #666;
            }

            .value {
              font-weight: bold;
            }
          }
        }
      }

      .alarm-buttons {
        display: flex;
        margin-right: 1rem;
        flex-wrap: wrap;
        width: 4.2rem;
        justify-content: space-between;

        .alarm-btn {
          width: 2rem;
          height: 0.4rem;
          font-size: 0.14rem;
          background: #0355C7;
          margin: 0;
          margin-bottom: 0.12rem;
        }
        .alarm-btn:last-child {
          margin-bottom: 0;
        }
      }

      .temperature-gauge {
        width: 1.4rem;
        height: 1.4rem;
        position: relative;

        img {
          display: block;
          width: 100%;
          height: 100%;
        }
        
        .current-temp {
          position: absolute;
          bottom: 0.1rem;
          left: 0;
          right: 0;
          text-align: center;
          font-weight: bold;
          font-size: 0.16rem;
          color: #0355C7;
        }
      }
    }
  }
}
</style>
